<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sj" tagdir="/WEB-INF/tags/spring-jquery-tags"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ include file="/common/taglibs.jsp"%>
<link href="<c:url value='/css/dhtmlxcombo.css' />" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
	$(document).ready(function() {
		$('#pageTitle').text('<spring:message code="addPayee.heading" />');
		$("#editPayeeForm").validate({
			rules : {
				payeeName : {
					required : true
				}
			}
		});
		

		
// 		$("#countries").change(function() {
// 			loadDataViaAjax("loadStates.do", {
// 				"countryId" : this.value
// 			}, parseStatesJson);
// 		});

// 		$("#countries").change();
		loadStates();
		<c:if test="${!empty payee.id && payee.id > 0}">
		$('#updateBankInfo').click(function() {
			loadDiv('content', 'showEditPayeeBankInfo.do?id=${payee.id}');
		});
		</c:if>

		$('.close-button').click(function() {
			loadDiv('content', '${paymentUrl}');
   		});
		
		$('.cancel-button').click(function() {
			$(this).bind("ajaxSend", function(){
				$('#loading').remove();
				$(this).after("<img  id='loading' src='<c:url value='/images/ajax-loader.gif'/>' alt='loading' />");

				 }).bind("ajaxComplete", function(){
					$('#loading').remove();
				 })			
			loadDiv('content', '${paymentUrl}');
		});	
		
	});
	$('#save').click(function(){
		$(this).bind("ajaxSend", function(){
			$('#loading').remove();
			$(this).after("<img  id='loading' src='<c:url value='/images/ajax-loader.gif'/>' alt='loading' />");

			 }).bind("ajaxComplete", function(){
				$('#loading').remove();
			 })
		
	});
	$("#saveAndAddBankInfo").click(function(){
		$(this).bind("ajaxSend", function(){
			$('#loading').remove();
			$(this).after("<img  id='loading' src='<c:url value='/images/ajax-loader.gif'/>' alt='loading' />");

			 }).bind("ajaxComplete", function(){
				$('#loading').remove();
			 })
	});
	
	function parseStatesJson(data) {
	////	var stateId = '${donor.state.id}';
// 		var payeeStateId='${payee.payeestate.id}';
		
// 		var html = '<option value="">Select</option>';
// 		if (data) {
// 			console.log("contain data");
// 			for (p in data) {
// 				if(payeeStateId == p) {
// 					html += "<option selected='selected' value='" + p + "'>" + data[p] + "</option>";
// 				} else {
// 					html += "<option value='" + p + "'>" + data[p] + "</option>";
// 				}
// 			}
// 		}
// 		$("#states option").remove();
// 		$("#states").append(html);
		
			var payeeStateId='${payee.payeestate.id}';

		  if (data) {
			  z2.clearAll();
		   for (p in data) {
		    z2.addOption([[p,data[p]]]);
		    if(p==payeeStateId)			
			   z2.setComboValue(p);
		    }
		   }
		   

	}
	
	function setSubmitAction(){
		$("#submitAction").val("AddBankInfo");
	}
	
	var z1 = dhtmlXComboFromSelect("countries",274);
		z1.enableFilteringMode(true);
		z1.attachEvent("onChange",loadStates);
	function loadStates()
	{
		loadDataViaAjax("loadStates.do", {
			   "countryId" : z1.getSelectedValue()
			  }, parseStatesJson);
		
	}
 
	var z2 = dhtmlXComboFromSelect("states",274);
	z2.enableFilteringMode(true);
	
	var z3 = dhtmlXComboFromSelect("payeetype",274);
	z3.enableFilteringMode(true);

</script>
<div id="editPayeeDiv">
	<form:form name="editPayeeForm" id="editPayeeForm" action="savePayee.do" method="post" modelAttribute="payee">
		<form:hidden path="id" />
		<form:hidden path="submitAction" />
		<input type="hidden" name="mode" value="${mode }" />
		<input type="hidden" name="paymentUrl" value="${paymentUrl }" />
		<div class="main_form">
			<div class="form_head">
				<c:if test="${!empty mode && mode == 'editMode' }">
				<div class="floatL" style="padding-top:5px; width: 800px;">
					<a id="updateBankInfo" href="#" class="blue_btn" onclick="return false;"><spring:message code="payee.bankinfo.heading" /></a>
				</div>
				</c:if>
	    		<a href="#" class="close-button gray_btn floatR">Close Form</a><br class="clear" />
	    	</div>
	    	<div class="form_cont">
				<table cellspacing="10" width="100%">
					<tr class="row">
						<td class="input-field" colspan="3" align="center">
							<%@ include file="/common/messages.jsp" %>
						</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeeName" /></td>
						<td class="input-field">
							<form:input path="payeeName" maxlength="100" cssClass="input-full-width text_white-req text_blue" />
							<form:errors path="payeeName" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeetype" /></td>
						<td class="input-field">
							<form:select id="payeetype" path="payeetype" cssClass="text_white">
								<form:option value="" label="" />
								<c:if test="${isFinanceUser}">
								<form:option value="Partner" label="Partner" />
								</c:if>
								<form:option value="Staff" label="Staff" />
								<c:if test="${isFinanceUser}">
								<form:option value="Field Office" label="Field Office" />
								</c:if>
								<form:option value="Other" label="Other" />
							</form:select>
							<form:errors path="payeetype" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeeEmail" /></td>
						<td class="input-field">
							<form:input path="payeeEmail" maxlength="100" cssClass="input-full-width text_white" />
							<form:errors path="payeeEmail" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.country" /></td>
						<td class="input-field">
							<form:select path="payeeCountry.id"	id="countries" cssClass="text_white">
								<form:option value="" label="" />
								<form:options items="${countryList}" itemValue="id" itemLabel="displayName" />
							</form:select>
							<form:errors path="payeeCountry.id" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.state" /></td>
						<td class="input-field">
							<form:select path="payeestate.id" id="states" cssClass="text_white">
								
							</form:select>
							<form:errors path="payeestate.id" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>						
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeeAddress1" /></td>
						<td class="input-field">
							<form:input path="payeeAddress1" maxlength="100" cssClass="input-full-width text_white" />
							<form:errors path="payeeAddress1" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeeAddress2" /></td>
						<td class="input-field">
							<form:input path="payeeAddress2" maxlength="100" cssClass="input-full-width text_white" />
							<form:errors path="payeeAddress2" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeeCity" /></td>
						<td class="input-field">
							<form:input path="payeeCity" maxlength="50" cssClass="input-full-width text_white" />
							<form:errors path="payeeCity" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeeZipCode" /></td>
						<td class="input-field">
							<form:input path="payeeZipCode" maxlength="20" cssClass="input-full-width text_white" />
							<form:errors path="payeeZipCode" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeePhone" /></td>
						<td class="input-field">
							<form:input path="payeePhone" maxlength="20" cssClass="input-full-width text_white" />
							<form:errors path="payeePhone" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeeFax" /></td>
						<td class="input-field">
							<form:input path="payeeFax" maxlength="20" cssClass="input-full-width text_white" />
							<form:errors path="payeeFax" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.payeeUrl" /></td>
						<td class="input-field">
							<form:input path="payeeUrl" maxlength="400" cssClass="input-full-width text_white" />
							<form:errors path="payeeUrl" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
                    <tr class="row">
                        <td class="label2">Employer Tax ID</td>
                        <td class="input-field">
                            <form:input path="employerTaxId" maxlength="255" cssClass="input-full-width text_white" />
                            <form:errors path="employerTaxId" cssClass="error" />
                        </td>
                        <td width="50">&nbsp;</td>
                    </tr>
					<tr class="row">
						<td class="label2"><spring:message code="editPayee.label.inactive" /></td>
						<td class="input-field">
							<form:checkbox path="inactive" />
							<form:errors path="inactive" cssClass="error" />
						</td>
						<td width="50">&nbsp;</td>
					</tr>
					<!-- start payee bank info -->
					<tr style="display:none">		
					<td>	
						<form:input path="chipsCode" maxlength="25" cssClass="input-full-width-req text_blue" />
						<form:input path="beneficiarytName" maxlength="100" cssClass="input-full-width-req text_blue" />
						<form:input path="accountNumber" maxlength="25" cssClass="input-full-width-req text_blue" />
						<form:input path="specialInstructions" maxlength="200" cssClass="input-full-width text_white" />
						<form:input path="bankCode" maxlength="25" cssClass="input-full-width-req text_blue" />
						<form:input path="intermediaryBankCode" maxlength="25" cssClass="input-full-width text_white" />
						<form:input path="bankName" maxlength="100" cssClass="input-full-width-req text_blue" />
						<form:input path="intermediaryBank" maxlength="100" cssClass="input-full-width text_white" />
						<form:input path="beneficiaryPhoneNumber" maxlength="20" cssClass="input-full-width text_white" />
						<form:input path="bankZipCode" maxlength="20" cssClass="input-full-width text_white" />
						<form:input path="beneficiaryZipCode" maxlength="20" cssClass="input-full-width text_white" />
						<form:input path="bankState" maxlength="25" cssClass="input-full-width text_white" />
						<form:input path="beneficiaryState" maxlength="25" cssClass="input-full-width text_white" />
						<form:input path="bankCity" maxlength="25" cssClass="input-full-width text_white" />
						<form:input path="beneficiaryCity" maxlength="50" cssClass="input-full-width text_white" />
						<form:input path="bankAddressLine2" maxlength="100" cssClass="input-full-width text_white" />
						<form:input path="beneficiaryAddressLine2" maxlength="100" cssClass="input-full-width text_white" />
						<form:input path="bankAddressLine1" maxlength="100" cssClass="input-full-width text_white" />
						<form:input path="beneficiaryAddressLine1" maxlength="100" cssClass="input-full-width text_white" />
					<td>
					</tr>
					
					
					
		<!--  end hidden payee bank info -->			
					<tr class="row">
						<td class="label2"></td>
						<td class="input-field"></td>
						<td width="50">&nbsp;</td>
					</tr>					
					<tr class="row">
						<td class="input-field" align="center" colspan="3">
							<input type="button" class="cancel-button gray_btn" value="Cancel" id="cancel"> 
							<sj:submit cssClass="blue_btn" id="save" target="editPayeeDiv" key="editPayee.button.save" validate="true" />
							<c:if test="${empty mode || mode != 'editMode' }">
								<sj:submit cssClass="blue_btn" id="saveAndAddBankInfo" target="editPayeeDiv" key="editPayee.button.saveAddBankInfo" validate="true" />
							</c:if>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</form:form>
	<script type="text/javascript">
		$(document).ready(function() {
			$('table.tablesorter').tablesorter({
				widgets : [ 'zebra' ],
				sortList : [ [ 0, 0 ] ],
				headers : {
					3 : {
						sorter : false
					},
					4 : {
						sorter : false
					}
				}
			});

			$('.edit-payeeaward-link').click(function() {
				loadDiv('content', 'showEditPayeeaward.do?id=' + $(this).attr('payeeawardId'));
			});
		});
	</script>
	<div id="payeeawardListDiv" class="hastable">
		<%-- <table class="tablesorter">
		<thead>
			<tr>
				<th><spring:message code="payeeawardlist.table.heading.payeeAwardNumber"/></th>
				<th><spring:message code="payeeawardlist.table.heading.payeeAwardDesc"/></th>
				<th><spring:message code="payeeawardlist.table.heading.startDate"/></th>
				<th><spring:message code="payeeawardlist.table.heading.city"/></th>
				<th><spring:message code="payeeawardlist.table.heading.state"/></th>							
				<th><spring:message code="payeeawardlist.table.heading.viewAward"/></th>
				<th><spring:message code="payeeawardlist.table.heading.edit"/></th>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${payee.payeeawards}" var="payeeaward">
				<tr>
					<td>${payeeaward.payeeAwardNumber}</td>
					<td>${payeeaward.payeeAwardDesc}</td>
					<td>${payeeaward.startDate}</td>
					<td>${payeeaward.city}</td>
					<td>${payeeaward.state}</td>				
					<td><a href="javascript://" class="view-awards-link" payeeawardId="${payeeaward.id}"><spring:message code="payeeawardlist.table.link.viewAward"/></a></td>
					<td><a href="javascript://" class="edit-payeeaward-link" payeeawardId="${payeeaward.id}"><spring:message code="payeeawardlist.table.link.edit"/></a></td>
				</tr>
			</c:forEach>
		</tbody>
	</table> --%>
		<div id="payeeawardListPager"></div>
	</div>
</div>
